<!-- 新建实物奖品 -->
<template>
  <a-drawer v-model:visible="vdata.visible" :maskClosable="false" :title="'实物奖品'" width="40%">
    <a-steps progress-dot :current="vdata.currentStep">
      <a-step title="新建奖品" />
      <a-step title="可兑换网点配置" />
    </a-steps>

    <a-form
      v-if="vdata.currentStep == 0"
      ref="stepForm0Ref"
      :model="vdata.saveObject"
      layout="horizontal"
      labelAlign="left"
      :hideRequiredMark="true"
      :colon="false"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 20 }"
      :rules="vdata.step0Rules"
      style="margin-top: 30px; margin-left: 20px;"
    >
    <a-form-item label="奖品名称" name="awardName" :wrapper-col="{ span: 9 }">
        <a-input v-model:value="vdata.saveObject['awardName']" placeholder="奖品名称" />
      </a-form-item>
      <a-form-item label="奖品价值" name="awardValue" :wrapper-col="{ span: 9 }">
        <a-input-number v-model:value="vdata.saveObject['awardValue']" style="width: 100%;" min="0" />
      </a-form-item>
      <a-form-item label="奖品数量" name="awardNum" :wrapper-col="{ span: 9 }">
        <a-input-number v-model:value="vdata.saveObject['awardNum']" style="width: 100%;" min="0" />
      </a-form-item>
    </a-form>

    <a-form
      v-if="vdata.currentStep == 1"
      ref="stepForm0Ref"
      :model="vdata.saveObject"
      layout="horizontal"
      labelAlign="left"
      :hideRequiredMark="true"
      :colon="false"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 18 }"
      :rules="vdata.step0Rules"
      style="margin-top: 30px; margin-left: 20px;"
    >
      <a-form-item name="sTime" label="上架时间">
        <a-range-picker
          v-model:value="vdata.saveObject['sTime']"
          value-format="YYYY-MM-DD"
          :disabled-date="(current)=>current && current < dayjs().endOf('day')"
        />
      </a-form-item>
      <a-form-item name="isLimit" label="限制兑换网点">
        <a-space direction="vertical">
          <a-radio-group v-model:value="vdata.saveObject['isLimit']" style="vertical-align: -5px;">
            <a-radio class="a-radio" :value="'M0'">不限制</a-radio>
            <a-radio class="a-radio" :value="'M1'">限制</a-radio>
          </a-radio-group>
          <div v-if="vdata.saveObject.isLimit == 'M1'">
            <a-space style="gap: 50px;">
              <a-space>
                <span>未发放数量</span>
                <span>1234156</span>
              </a-space>
              <a-space>
                <span>本机构还可配置</span>
                <span>1234156</span>
              </a-space>
            </a-space>
            <a-tree v-model:checkedKeys="vdata.checkedKeys" checkable :tree-data="treeData">
              <template #title="{ checked, title, key }">
                <a-space>{{ title }}<a-input-number v-if="checked" @change="($event)=>changeFunc($event,key)"/><span v-if="checked">张</span></a-space>
              </template>
            </a-tree>
          </div>
        </a-space>
        
      </a-form-item>
    </a-form>
    <div class="drawer-btn-center">
      <a-button v-if="vdata.currentStep != 0" style="margin-right:8px" @click="onSteps(-1)">
        <step-backward-outlined />
        上一步
      </a-button>
      <a-button v-if="vdata.currentStep != 1" style="margin-right:8px" @click="onSteps(1)">
        <step-forward-outlined />
        下一步
      </a-button>
      <a-button v-if="vdata.currentStep == 1" type="primary" :loading="vdata.btnLoading"
        @click="handleOkFunc">
        <check-outlined />
        完成
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup>
import { reactive, ref, defineExpose, watch } from 'vue'
import dayjs from 'dayjs'


const vdata = reactive({
  currentStep: 0,
  visible: false,
  saveObject: {
    allotNum: {}, // 分配数量
  },
})

const treeData = [{
  title: '河南省',
  key: '河南省',
  children: [{
    title: '郑州市',
    key: '郑州市',
    // disabled: true,
    children: [{
      title: '金水区',
      key: '金水区',
      // disableCheckbox: true,
      children: [{
        title: '金水区一号网点',
        key: '金水区一号网点',
        // disableCheckbox: true,
      }, {
        title: '金水区二号网点',
        key: '金水区二号网点',
        // disableCheckbox: true,
      },]
    }, {
      title: '二七区',
      key: '二七区',
    }],
  },{
    title: '洛阳市',
    key: '洛阳市',
    // disabled: true,
    children: [{
      title: '1区',
      key: '1区',
      // disableCheckbox: true,
      children: [{
        title: '1区一号网点',
        key: '1区一号网点',
        // disableCheckbox: true,
      }, {
        title: '1区二号网点',
        key: '1区二号网点',
        // disableCheckbox: true,
      },]
    }, {
      title: '2区',
      key: '2区',
    }],
  }],
}];

/**
 * 切换步骤
 */
function onSteps(step) {
  if (step < 0) {
    vdata.currentStep--
  } else {
    vdata.currentStep++
  }
}

function changeFunc(e,key){ // 配置数量
  vdata.saveObject.allotNum[key] = e
}

function handleOkFunc(){
  console.log(vdata)
}

function show(){
  vdata.visible = true

  vdata.saveObject = {
    isLimit: 'M0'
  }
}

defineExpose({
  show
})

</script>